<template>
    <div class="container-fluid" v-loading="loading">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div class="pull-left">
                            <p class="m-t-0"><span class="h4">用户新关注回复</span>（通过“免费名片”）按钮关注用户，30秒推送此消息，其他情况关注后直接发送此消息</p>
                        </div>
                        <div class="table-responsive" style="width: 100%;margin-top: 20px;">
                            <el-table
                                    :data="subList"
                                    style="width: 100%"
                            >
                                <el-table-column
                                        prop="title"
                                        label="任务标题"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        label="消息内容"
                                        width="180">
                                    <template slot-scope="scope">
                                        <a @click="openEdit(scope.row.uniqueId)" style="cursor:pointer;">设置</a>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="状态"
                                        width="100">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.status">已启用</span>
                                        <span v-else>已停用</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="操作"
                                        align="center"
                                        width="220">
                                    <template slot-scope="scope">
                                        <el-button size="mini" @click="handlePush(scope.row._id)">发送预览</el-button>

                                        <el-button size="mini" type="success" @click="setStatus(scope.row.uniqueId,0)"
                                                   v-if="scope.row.status===1">禁用
                                        </el-button>
                                        <el-button size="mini" @click="setStatus(scope.row.uniqueId,1)"
                                                   v-if="!scope.row.status">启用
                                        </el-button>
                                    </template>

                                </el-table-column>
                            </el-table>
                        </div>
                    </div>


                    <div class="card-body">
                        <div>
                            <p class="m-t-0 h4">关注10分之内推送消息</p>
                        </div>
                        <div>
                            <form class="form-inline" onsubmit="return false;">
                                <div class="form-group">
                                    <label>回复任务标题</label>
                                    <input class="form-control" type="text" placeholder="回复任务标题" v-model="title">
                                </div>
                                <div class="form-group">
                                    <label>关注后（1-10）分钟后回复</label>
                                    <input class="form-control" type="number" v-model="startTime">
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-success" type="submit" v-on:click="addMessage()">添加</button>
                                </div>
                            </form>
                        </div>

                        <div class="table-responsive">
                            <el-table
                                    :data="userSubList"
                                    style="width: 100%"
                            >
                                <el-table-column
                                        prop="title"
                                        label="任务标题"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="startTime"
                                        label="关注后分钟"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        label="消息内容"
                                        width="180">
                                    <template slot-scope="scope">
                                        <a @click="openEdit(scope.row._id)" style="cursor:pointer;">设置</a>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="状态"
                                        width="100">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.status">已启用</span>
                                        <span v-else>已停用</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="操作"
                                        align="center"
                                >
                                    <template slot-scope="scope">
                                        <el-button size="mini" @click="handlePush(scope.row._id)">发送预览</el-button>

                                        <el-button size="mini" type="success" @click="setStatus(scope.row._id,0)"
                                                   v-if="scope.row.status===1">禁用
                                        </el-button>
                                        <el-button size="mini" @click="setStatus(scope.row._id,1)"
                                                   v-if="!scope.row.status">启用
                                        </el-button>
                                        <el-button size="mini" @click="openDialogFormVisible(scope.row)">修改</el-button>
                                        <el-button size="mini" @click="handleDelete(scope.row)" type="danger">删除
                                        </el-button>
                                    </template>

                                </el-table-column>
                            </el-table>
                        </div>

                        <el-dialog title="任务设置" :visible.sync="dialogEditFormVisible" :close-on-click-modal="false">
                            <el-form :model="editForm" onsubmit="return false;">
                                <el-form-item label="任务标题" :label-width="formLabelWidth">
                                    <input class="form-control" type="text" placeholder="任务标题" v-model="editForm.title">
                                </el-form-item>

                                <el-form-item label="回复时间" :label-width="formLabelWidth">
                                    <input class="form-control" type="number" placeholder="任务标题"
                                           v-model="editForm.startTime">
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogEditFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="updateMessage">确 定</el-button>
                            </div>
                        </el-dialog>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import common from '../../api/public.js';
    export default {
        name: "MessageUserComponent",
        data() {
            return {
                subList: [],
                loading: false,
                title: '',
                startTime: '',
                userSubList: [],
                editForm: {
                    title: '',
                    startTime: 0,
                },
                id: '',
                dialogEditFormVisible: false,
                formLabelWidth: "120px"
            }
        },
        methods: {
            ...common,
            getInfo: function () {
                let self = this;
                let uri = "message/post-subscribe";
                let data = {};
                self.loading = true;

                axios.post(uri, data).then(function (result) {
                    self.subList = result.subscribeMessages;
                    self.userSubList = result.userSubList;
                    self.loading = false;
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            openEdit(id) {
                this.openUri('message/' + id + '/material-edit');
            },
            setStatus: function (id, status) {
                let self = this;
                let uri = "message/set-status/" + id + '/' + status;
                self.loading = true;

                axios.get(uri).then(function (result) {
                    self.getInfo();
                }).catch(function (error) {
                    self.false = true;
                });
            },
            addMessage: function () {
                let self = this;
                let uri = "message/store";

                if (!self.title) {
                    self.$message.error("必须填写回复任务标题");
                    return;
                }
                if (!self.startTime) {
                    self.$message.error("必须填写分钟");
                    return;
                }
                let data = {
                    title: self.title,
                    startTime: self.startTime,
                    messageType: 'subscribe'
                };
                self.loading = true;

                axios.post(uri, data).then(function (result) {
                    if (result) {
                        self.title = '';
                        self.startTime = '';
                        self.getInfo();
                    } else {
                        self.$message.error("创建信息失败！");
                    }
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            handleDelete: function (row) {
                let self = this;
                let tipStr = "此操作将永久删除" + row.title + ", 是否继续?";
                self.$confirm(tipStr, '文章删除', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.deleteRequire(row._id)
                }).catch(() => {
                    self.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            deleteRequire: function (id) {
                let self = this;
                let uri = "message/" + id;
                axios.delete(uri).then(function (result) {
                    self.getInfo();
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            handlePush: function (id) {
                let self = this;

                this.$prompt('请输入手机号码', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^1[3456789]\d{9}$/,
                    inputErrorMessage: '手机号码格式不正确'
                }).then(({value}) => {
                    let uri = "message/push/" + id + '/' + value;

                    axios.get(uri).then(function (result) {
                        console.log(result);
                    }).catch(function (error) {
                        self.loading = false;
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });

            },

            //更改时间
            openDialogFormVisible(row) {
                this.dialogEditFormVisible = true;
                this.editForm.title = row.title;
                this.editForm.startTime = parseInt(row.startTime);
                this.id = row._id;
            },
            updateMessage() {
                //console.log(this.editForm);
                let self = this;
                if (!self.editForm.title) {
                    self.$message.error("必须填写任务标题");
                    return;
                }
                if (!self.editForm.startTime) {
                    self.$message.error("必须填写分钟");
                    return;
                }
                let uri = "message/subscribe/" + self.id;
                self.loading = true;
                this.dialogEditFormVisible = false;

                axios.put(uri, self.editForm).then(function (result) {
                    if (result) {
                        self.getInfo();
                    } else {
                        self.$message.error("更新信息失败！");
                        self.loading = false;
                    }
                }).catch(function (error) {
                    self.loading = false;
                });
            }
        },
        mounted() {
            this.getInfo();
        }
    }
</script>

<style scoped>

</style>
